<template>
  <el-scrollbar style="height:100%">
    <div>
      <el-row>
        <div class="rowborder">
          <span class="txt">维护</span>
          <el-form ref="form" label-width="80px">
            <el-form-item>
              <el-input
                v-model="this.list[this.$route.query.index].factmod"
                :readonly="true"
                class="activity_text"
              >
                <template slot="prepend">活动名称</template>
              </el-input>
            </el-form-item>
            <el-col :span="12">
              <!-- 展示活动模块 -->
              <el-form-item>
                <el-input
                  placeholder="请输入内容"
                  v-model="this.list[this.$route.query.index].ftechnician"
                  :readonly="true"
                >
                  <template slot="prepend">用户角色</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 展示学校 -->
              <el-form-item label="问题时间">
                <el-date-picker
                  v-model="this.list[this.$route.query.index].feedbacktime"
                  :readonly="true"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 问题描述 -->
            <div class="text_2">问题描述：</div>
            <div>
              <el-form-item class="div-Textarea">
                <el-input
                  type="textarea"
                  :rows="10"
                  v-model="this.list[this.$route.query.index].fopinions"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <!-- 图片显示 -->
              <div class="imgview">
               <img v-for="url in urls" :key="url" :src="url" class="imgsize" lazy>
              </div>
              <!-- 展示问题网址 -->
              <el-form-item class="div-Http">
                <el-input
                  placeholder="输入网址"
                  :readonly="true"
                  v-model="this.list[this.$route.query.index].fproblemhttp"
                  class="http"
                >
                  <template slot="prepend">问题网址</template>
                </el-input>
              </el-form-item>
              <!-- 输入建议 -->
              <div class="text_2">建议：</div>
              <div>
                <el-form-item class="div-Textarea">
                  <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入解决方案或建议"
                    v-model="recommendations"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <!-- 确认取消 -->
            <div style="margin-left:80px">
 状态: <el-select v-model="value" clearable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select></div>
            <el-form-item class="div-Button">
              <el-button type="primary" @click="bbb" class="button-confirm">确认</el-button>
              <el-button class="button-cancel" @click="dayin">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script>
import { getFeedbacks, updateFeedbacks } from "@/api/Feedback";
export default {
  data() {
    return {
      problem_http: "http://xxx.com",
      list: "",
      recommendations: "",
      value:"进行中",
      form: {},
      data: [],
            options: [{
        value: '进行中',
        label: '进行中'
      }, {
        value: '已完成',
        label: '已完成'
      }],
        urls: []
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      let data = async () => {
        try {
          let result = await getFeedbacks();
          if (result) {
            this.list = result;
            this.loading = false;
             let imgname = this.list[this.$route.query.index].imgsrc;
            let imgarry = imgname.split(",");
            for (var i = 0; i < imgarry.length; i++) {
              this.urls.push("http://localhost:5000/" + imgarry[i]);
            }
            console.log(this.urls);
          }
        } catch (err) {
          console.log(err);
        }
      };
      data();
    },
    bbb() {
      console.log("hello world");
      this.$confirm("是否提交你的建议，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let index = this.$route.query.index;
          this.list[index].state = this.value;
          this.list[index].frecommendations = this.recommendations;
          console.log(this.list[index]);
          await updateFeedbacks(this.list[index]);
          this.$message({
            type: "success",
            message: "修改成功!"
          });
          this.$router.push({ path: "/Maintain" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改"
          });
        });
    },
    dayin() {
      this.$router.push({ path: "/Maintain" });
    }
  }
};
</script>

<style>
.rowborder {
  border: 2px solid #cccccc;
  margin: 40px 20px 40px 40px;
}
.txt {
  display: block;
  width: 5%;
  height: 30px;
  position: relative;
  margin-left: 5%;
  top: -10px;
  text-align: center;
  background: white;
}
.text_2 {
  margin: 2% 0 2% 8%;
}
.activity_text {
  margin-top: 30px;
  width: 90%;
}
.imgview{
  margin:0 8% 0 8%;
  width: 80%;
  border: 1px solid #cccccc;
}
.imgsize{
  width: 200px;
  height: 200px;
}
.div-Textarea {
  width: 90%;
}
.div-Http {
  margin-top: 20px;
  width: 100%;
}
.http {
  width: 40%;
}
.div-Button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-confirm {
  width: 120px;
  background-color: #009489;
  color: white;
}
.button-cancel {
  width: 120px;
}
</style>
